<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .bbb{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>

<div id="app">
    <table border="1">
        <tr>
            <td>
                <input type="checkbox" v-on:click="selectAll">
            </td>
            <td>ID</td>
            <td>用户名</td>
            <td>密码</td>
        </tr>
        <tr v-for="user in users">
            <td>
                <input type="checkbox" v-bind:value="user.id" v-model="ids">
            </td>
            <td v-text="user.id"></td>
            <td v-text="user.userName"></td>
            <td v-text="user.password"></td>
        </tr>
    </table><br/>
    被选中的用户id:{{ids}}
</div>

</body>

<script>
    Vue.createApp({
        data() {
            return {
                users:[
                    {id:1,userName:"张三",password:"123456"},
                    {id:2,userName:"李四",password:"123456"},
                    {id:3,userName:"王五",password:"123456"},
                    {id:4,userName:"赵六",password:"123456"},
                    {id:5,userName:"王二麻子",password:"123456"},
                ],
                ids:[]
            }
        },
        methods:{
            selectAll(){
                var self = this
                if(event.target.checked){
                    this.users.forEach(function(current,index){
                        self.ids.push(current.id)
                    })
                }else{
                    self.ids.length=0
                }

            }
        }
    }).mount("#app")
</script>

</html>